<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:th="http://www.thymeleaf.org">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="zTree/css/demo.css">
<link rel="stylesheet" href="zTree/css/zTreeStyle/zTreeStyle.css">
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="zTree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="zTree//js/jquery.ztree.exedit.js"></script>
<link rel="stylesheet" href="semantic/semantic.min.css" />
<script src="semantic/semantic.min.js"></script>
<script src="js/jquery.js"></script>
<script src="layer/layer.js"></script>
<title>导航页</title>
</head>
<body>
	<div class="ui two column doubling stackable grid container">
		<div class="column" style="background-color: #AEDD81">
			<p>导航栏</p>
			<div class="ui container">
				<fieldset
					style="width: 540px; height: 1050px; border: 1px solid; margin-top: 10px; border-color: #74B2E2; border-radius: 6px 6px 6px 6px">
					<legend
						style="color: #2779AA; width: 30%; border-bottom: 0px; margin-left: 12px;">
						<b>导航信息</b>
					</legend>
					<div class="zTreeDemoBackground left" style="margin-left: 10px">
						<ul id="treeDemo" class="ztree"></ul>
					</div>
				</fieldset>
			</div>

			<div class="ui container" style="margin-top: 50px"></div>

		</div>
		<div class="column" style="background-color: #FC9D99; height: 1000px">
			<p>导航工具栏</p>
			<div class="ui clearing segment">
				<form id="filterForm" class="ui form" method="get">
					<div class="fields">
						<div class="field">
							<label>关键字：</label> <input type="text" id="name" name="name"
								placeholder="" style='width: 150px;' oninput="searchNode()" />
						</div>
					</div>
				</form>
			</div>
			<div class="fields">
				<button class="ui twitter button" type="button" onclick="addFirst()">
					<i class="twitter icon"></i>添加一级目录
				</button>

				<button class="ui twitter button" type="button"
					onclick="clearCache()">
					<i class="twitter icon"></i>清缓存
				</button>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
var setting = {
		view: {
            fontCss: getFontCss
        },
        check : {
            enable : false
        },
        edit: {
            enable: true,
            showRemoveBtn: showRemoveBtn
        },
        data : {
            simpleData : {
                enable : true
            }
        },
        callback: {
            onRightClick: onRightClick,
            beforeMouseDown: beforeMouseDown,
            beforeEditName: beforeEditName,
            beforeRemove: beforeRemove
        }
    };
$(function() {
    var zNodes;
    $.ajax({
        url : "urlEdit/list",
        type : "POST",
        cache : false,
        success : function(data) {
            var objs = jQuery.parseJSON(data);
            zNodes = objs;
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        },
        error : function() {
            alert("error");
        }
    });
})

function showRemoveBtn(treeId, treeNode) {
            return !treeNode.isParent;
        }

function beforeRemove(treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.selectNode(treeNode);
            	var id = treeNode.id;
            	$.ajax({
                    url : "urlEdit/delete",
                    type : "POST",
                    data : {id},
                    cache : false,
                    success : function(data) {
                   
                    },
                    error : function() {
                        alert("error");
                    }
                });
            	return true
        }
        
function beforeEditName(treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("treeDemo");
    zTree.selectNode(treeNode);
    setTimeout(function() {
        	var id = treeNode.id;
            $.ajax({
                type : "GET",
                url : "urlEdit/updatePre",
                cache : false,
                data : {id},
                timeout : 600000,
                success : function(data) {
                    layer.open({
                        type : 1,
                        title : '修改导航信息',
                        skin : 'layui-layer-rim', //样式类名
                        anim : 2,
                        area : [ '800px', '400px' ], //宽高
                        shadeClose : false, //开启遮罩关闭
                        content : data
                    });
                }
            }); 
    }, 0);
    return false;
}
        
  
var nodeList = [];
var nodeParent = [];
var nodeParentOld = [];
var i = 0
function searchNode() {
	deal();
}

var zTree;
function deal(){
	zTree = $.fn.zTree.getZTreeObj("treeDemo");
	//去除父节点高亮和子节点高亮
    updateNodes(false)
    updateParentNodes(false)
    nodeParent = [];
    var value = $("#name").val();
    if(value == ""){
    	nodeList = [];
    }else{
    	nodeList = zTree.getNodesByParamFuzzy("name", value);
    }
    if(nodeList.length != 0){
        findParent(nodeList)
        //高亮父节点和子节点
        updateParentNodes(true)
        updateNodes(true);
    }
    // nodeParentOld 需要折叠，nodeParent 需要展开,如果nodeParentOld中有nodeParent里面的值则不折叠
    for(var i=0, l=nodeParentOld.length; i<l; i++){
    	var flag = true;
    	for(var j=0, m=nodeParent.length; j<m; j++){
            if(nodeParent[j] == nodeParentOld[i]){
            	  flag = false;
            	  continue;
            } 
        }
    	if(flag){
    		//折叠
    		node = zTree.getNodesByParam("id", nodeParentOld[i]);
            zTree.expandNode(node[0], false, null, null, null); 
    	}
    }  
    
    for(var i=0, n=nodeParent.length; i<n; i++){
        //展开
        node = zTree.getNodesByParam("id", nodeParent[i]);
        zTree.expandNode(node[0], true, null, null, null); 
    }  
    //将nodeParent 赋值给 nodeParentOld 代表下一次需要折叠的
    nodeParentOld = nodeParent;
}

//找到所有父节点
function findParent(nodeList){
	nodeNewList = [];
	for( var i=0, l=nodeList.length; i<l; i++) {
		var pId = nodeList[i].pId;
		if(pId == null){
			return;
		}
		//如果已经存在则不再插入
		var flag = true;
		for( var j=0, z=nodeParent.length; j<z; j++) {
			if(nodeParent[j] == pId){
				flag = false
				continue;
			}
		}
		if(flag){
			nodeParent.push(pId);
	        nodeNewList = zTree.getNodesByParam("id", parseInt(pId));
	        findParent(nodeNewList);
		}
    }
} 
function updateParentNodes(highlight){
	var node = [];
	//s里面记录的父节点全部高亮
	for(var i=0, l=nodeParent.length; i<l; i++){
		node = zTree.getNodesByParam("id", nodeParent[i]);
		node[0].highlight = highlight;
		zTree.updateNode(node[0]);
	}
}


function updateNodes(highlight) {
    for( var i=0, l=nodeList.length; i<l; i++) {
        nodeList[i].highlight = highlight;
        zTree.updateNode(nodeList[i]);
    }
}

function getFontCss(treeId, treeNode) {
    return (!!treeNode.highlight) ? {color:"#A60000", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
}
function onRightClick(event, treeId, treeNode) {
     //右键添加子节点
     var id = treeNode.id;
	$.ajax({
        type : "GET",
        url : "urlEdit/right",
        cache : false,
        data : {id},
        timeout : 600000,
        success : function(data) {
            layer.open({
                type : 1,
                title : '右键添加子节点',
                skin : 'layui-layer-rim', //样式类名
                anim : 2,
                area : [ '800px', '400px' ], //宽高
                shadeClose : false, //开启遮罩关闭
                content : data
            });
        },
    }); 
}
function beforeMouseDown(treeId, treeNode) {
	if(treeNode.url == null || treeNode.url == ''){
	   return;
	}
	    var id = treeNode.id;
	   $.ajax({
	       type : "GET",
	       url : "urlEdit/click",
	       cache : false,
	       data : {id},
	   }); 
}

function update() {
	var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
	nodes = zTree.getSelectedNodes(),
	treeNode = nodes[0];
	if (nodes.length == 0) {
	    alert("请先选择一个节点");
	    return;
	}
	var id = treeNode.id;
	$.ajax({
        type : "GET",
        url : "urlEdit/updatePre",
        cache : false,
        data : {id},
        timeout : 600000,
        success : function(data) {
            layer.open({
                type : 1,
                title : '修改导航信息',
                skin : 'layui-layer-rim', //样式类名
                anim : 2,
                area : [ '800px', '400px' ], //宽高
                shadeClose : false, //开启遮罩关闭
                content : data
            });
        }
    }); 
	
}

function addFirst() {
    $.ajax({
        type : "GET",
        url : "urlEdit/addFirst",
        cache : false,
        timeout : 600000,
        success : function(data) {
        	alert("添加成功，请刷新");
        	window.location.reload();
        }
    }); 
    
}

function clearCache() {
    $.ajax({
        type : "GET",
        url : "urlEdit/clearCache",
        cache : false,
        timeout : 600000,
        success : function(data) {
            alert("已清空，请刷新");
            window.location.reload();
        }
    }); 
    
}





function clearIs() {
    $("input").each(function() {
        var value = $(this).val("");
    });
}
</script>
</html>